<template>
	<view>
		<!-- 地址 -->
		<view class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{orderDetailData.receiverName}}</text>
						<text class="mobile">{{orderDetailData.receiverPhone}}</text>
						<text class="tag" v-if="orderDetailData.defaultStatus==1">默认</text>
					</view>
					<view class="address">
						<text class="mobile">{{orderDetailData.receiverIdcard}}</text>
					</view>
					<text class="address">{{orderDetailData.receiverProvince}} {{orderDetailData.receiverCity}}
						{{orderDetailData.receiverRegion}} {{orderDetailData.receiverDetailAddress}}</text>
				</view>
			</view>
		</view>

		<view class="goods-section">
			<view class="g-header b-b">
				<text class="name">{{orderDetailData.orderItemList[0].warehouseName}}</text>
				<text class="g-status" v-if="orderDetailData.status == 0">待付款</text>
				<text class="g-status" v-if="orderDetailData.status == 2">已发货</text>
				<text class="g-status" v-if="orderDetailData.status == 3">已支付</text>
				<text class="g-status" v-if="orderDetailData.status == 4">已取消</text>
				<text class="g-status" v-if="orderDetailData.status == 6">清关中</text>
				<text class="g-status" v-if="orderDetailData.status == 7">交易完成</text>
				<text class="g-status" v-if="orderDetailData.status == 8">已关闭</text>
				<text class="g-status" v-if="orderDetailData.status == 9">售后审核中</text>
				<text class="g-status" v-if="orderDetailData.status == 11">订单异常</text>
			</view>
			<!-- 商品列表 -->
			<view class="g-item" v-for="(item,index) in orderDetailData.orderItemList" :key="index">
				<image :src="item.productPic"></image>
				<view class="right" @click="navToDetailPage(item.productId)">
					<view class="title clamp">
						<view class="t-name">{{item.productName}}</view>
						<text class="price" v-if="item.integral != 0">{{item.integral}}积分</text>
						<text class="price" v-else>￥{{item.productPrice}}</text>
					</view>
					<view class="price-box">
						<view><img :src="item.nationalFlag" alt=""><text>{{item.originCountry}}</text></view>
						<text class="number">x {{item.productQuantity}}</text>
					</view>
					<text class="spec">规格：{{item.productAttr}}</text>
					<view class="detailCenterBtns">
						<!-- <view class="refund wl" v-if="orderDetailData.status!==0 && orderDetailData.status!==4" @click.stop="showLog(orderDetailData.id,orderDetailData.allCount,item.productPic)"><text>查看物流</text></view> -->
						<view class="refund" v-if="item.refundStatus == 0 && (orderDetailData.status == 1 || orderDetailData.status == 2 || orderDetailData.status == 3 || orderDetailData.status == 6 || orderDetailData.status == 9 || orderDetailData.status == 11)" @click.stop="goRefund(item.orderId,item)"><text>退款</text></view>
						<view class="refund" v-if="item.refundStatus == 1" @click.stop="goRefundDetail(item.orderId,item.productId,item.productSkuId)"><text>退款中</text></view>
						<view class="refund" v-if="item.refundStatus == 2" ><text>已退款</text></view>
						<view class="refund" v-if="item.refundStatus == 3" ><text>退款已拒绝</text></view>
						<view class="refund" v-if="item.refundStatus == 0 && (orderDetailData.status == 7)" @click.stop="goRefund(item.id,item)"><button open-type="contact" session-from=""><text>申请售后</text></button></view>
					</view>
				</view>
			</view>
		</view>


		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品合计</text>
				<!-- <text class="cell-tip" v-if="bStatus=='integral'&&!dataString">{{(detailList[0].omsCartItems[0].integralNum) * buyNum}}积分</text>
                <text class="cell-tip" v-else-if="bStatus=='integral'&&dataString">{{dataSobj.buyTotal?dataSobj.buyTotal:''}}积分</text>
                <text class="cell-tip" v-else-if="!dataString">￥{{(detailList[0].omsCartItems[0].price) * buyNum}}</text> -->
				<text class="cell-tip">￥{{orderDetailData.totalAmount}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠活动</text>
				<text class="cell-tip" v-if="orderDetailData.couponAmount == 0">无优惠</text>
				<text class="cell-tip" v-else>-{{orderDetailData.couponAmount}}</text>
			</view>
			<!-- <view class="yt-list-cell b-b" @click="toggleMask('show')" v-if="couponList.length>0">
                <text class="cell-tit clamp">优惠券</text>
            </view>
			<view class="yt-list-cell b-b"  v-if="couponList.length==0">
				<text class="cell-tit clamp">优惠券</text>
				<text class="cell-tip">无适用优惠券</text>
			</view> -->
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">￥{{orderDetailData.freightAmount}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">税费</text>
				<text class="cell-tip">已含税</text>
			</view>
			<view class="yt-list-cell actually">
				<text class="cell-tit clamp">实付</text>
				<!-- <text class="cell-tip m" v-if="bStatus=='integral'&&dataString">{{dataSobj.buyTotal?dataSobj.buyTotal:''}}积分</text> -->
				<text class="cell-tip m">￥{{orderDetailData.payAmount}}</text>
			</view>
		</view>
		<!--订单明细-->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单编号</text>
				<text class="cell-tip">{{orderDetailData.orderSn}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="orderDetailData.status != 0">
				<text class="cell-tit clamp">支付方式</text>
				<text class="cell-tip">微信</text>
			</view>
			<view class="yt-list-cell b-b" v-if="orderDetailData.status != 0">
				<text class="cell-tit clamp">支付编号</text>
				<text class="cell-tip">{{orderDetailData.trxid?orderDetailData.trxid:''}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">下单时间</text>
				<text class="cell-tip">{{orderDetailData.createTime}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="orderDetailData.status != 0">
				<text class="cell-tit clamp">成交时间</text>
				<text class="cell-tip">{{orderDetailData.paymentTime?orderDetailData.paymentTime:''}}</text>
			</view>
		</view>

		<!--详情付款-->
		<view class="footer detail" v-if="orderDetailData.status == 0">
			<text class="submit cancel" @click="submit('cancelBuy')">取消订单</text>
			<text class="submit pay" @click="submit('pay')">付款</text>
		</view>
		<!--确认收货-->
		<view class="footer detail" v-if="(orderDetailData.status == 2 || orderDetailData.status == 3 || orderDetailData.status == 6 || orderDetailData.status == 9) && orderDetailData.confirmStatus == 0">
			<text class="submit cancel" @click="submit('wuliu')">查看物流</text>
			<text class="submit pay" @click="ensure(orderDetailData.id)">确认收货</text>
		</view>
		<!--评价-->
		<view class="footer detail" v-if="orderDetailData.status == 7 && orderDetailData.isComment == 0">
			<text class="submit cancel" @click="submit('wuliu')">查看物流</text>
			<text class="submit pay" @click="submit('appraise')">评价</text>
		</view>
		<view class="footer detail" v-if="orderDetailData.status == 7 && orderDetailData.isComment == 1">
			<text class="submit cancel" @click="submit('wuliu')">查看物流</text>
			<text class="submit cancel">已完成</text>
		</view>
		<view class="footer detail" v-if="orderDetailData.status == 8 || orderDetailData.status == 4">
			<text class="submit cancel">已关闭</text>
		</view>
		<view class="footer detail" v-if="orderDetailData.status == 11">
			<text class="submit cancel">订单异常</text>
		</view>
	</view>
</template>

<script>
	import {
		_productDetail
	} from '../../common/vmeitime-http/home.js'
	import {
		_buyThis,
		_buyCart
	} from '../../common/vmeitime-http/cart.js'
	import {
		_userCoupon
	} from '../../common/vmeitime-http/mem.js'
	import {
		_orderDetail,
		_confirmPro,
		_orderCancel
	} from '../../common/vmeitime-http/order.js'
	import {
		_gLogistics
	} from '../../common/vmeitime-http/logistics.js'
	import util from '../../common/utils/util'
	export default {
		data() {
			return {
				orderDetailData: {}
			}
		},
		onLoad(options) {
			//商品数据
			//let data = JSON.parse(option.data);
			//console.log(data);
			uni.showLoading({
				title: '请稍后..',
				mask: true,
			});
			if (options.orderId) {
				this.getOrderId = options.orderId;
				this.getOrdDetail()
			}
		},
		methods: {
			navToDetailPage(id) {
				console.log(id);
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			/*获取各种状态的订单详情*/
			async getOrdDetail() {
				let para = {
					id: this.getOrderId
				};
				let tempData = await _orderDetail(para)
				if (tempData.data.code == 200) {
					uni.hideLoading();
					let orderDetailData = tempData.data.data;
					orderDetailData.createTime = util.formatDate.format(new Date(orderDetailData.createTime), 'yyyy-MM-dd hh:mm:ss');
					if (orderDetailData.paymentTime) {
						orderDetailData.paymentTime = util.formatDate.format(new Date(orderDetailData.paymentTime),
							'yyyy-MM-dd hh:mm:ss');
					}
					this.orderDetailData = orderDetailData;
				}
			},
			async submit(n) {
				if (n == "pay") {
					/*待付款，去付款*/

					// 积分支付
					if (this.orderDetailData.integration != 0) {
						// uni.navigateTo({
						// 	url: '/pages/money/pay?orderId=' + this.dataString.id + '&t=' + ((this.detailList[0].omsCartItems[0].integral) *
						// 		(this.detailList[0].omsCartItems[0].quantity)).toString() + '&payStatus=integral'
						// })
					} else {
						//               /*判断抢购是否结束*/
						let pStatic = false; /*抢购结束状态默认值*/
						let tempPanic = this.orderDetailData.orderItemList;
						tempPanic.forEach((item) => {
							if (item.flashEndTime) {
								if (item.flashStatus == "end") {
									pStatic = true;
									//                            throw new Error("break")
								}
							}
						});
						if (pStatic) {
							uni.showModal({
								title: '提示',
								content: '当前订单中的商品抢购已结束',
								showCancel: false,
								confirmText: "确定",
								confirmColor: "#017F01",
								success: function(res) {
									if (res.confirm) {

									} else if (res.cancel) {

									}
								}
							});
							return false;
						}
						uni.navigateTo({
							url: '/pages/money/pay?orderId=' + this.orderDetailData.id + '&t=' + this.orderDetailData.payAmount
						})
					}

				} else if (n == "cancelBuy") {
					this.cancelOrder();
				} else if (n == "wuliu") {
					/*去物流*/
					uni.navigateTo({
						url: `/pages/logistics/logistics?orderId=${this.orderDetailData.id}&count=${this.orderDetailData.allCount}&pic=${this.orderDetailData.orderItemList[0].productPic}`
					})
				} else if (n == "appraise") {
					/*评价货物*/
					uni.navigateTo({
						url: `/pages/appraise/release?orderId=${this.orderDetailData.id}`
					})
				}
			},
			async cancelOrder() {
				let tempCancel = await _orderCancel({
					orderId: this.orderDetailData.id
				})
				if (tempCancel.data.code == 200) {
					uni.navigateTo({
						url: `/pages/order/mode`
					})
				}
			},
			/*确认收货*/
			async conifrmPro() {
				// this.ensure();
// 				uni.showModal({
// 					title: '提示',
// 					content: '当前订单有正在退款的商品，取消退款后才能确认收货哦',
// 					showCancel: false,
// 					confirmText: "知道啦",
// 					confirmColor: "#017F01",
// 					success: function(res) {
// 						if (res.confirm) {
// 							this.ensure();
// 						} else if (res.cancel) {
// 
// 						}
// 					}
// 				});

			},
			async ensure(id) {
				let tempData = await _confirmPro({
					id: id
				});
				/*成功后跳转评价页面*/
				if (tempData.data.code == 200) {
					this.$api.msg("确认收货成功！");
					setTimeout(function() {
						uni.navigateTo({
							url: `/pages/appraise/release?orderId=${id}`
						})
					}, 1000)
				}
			},
			/*退款*/
			async goRefund(orderId,cItem){
			    uni.navigateTo({
			        url: `/pages/refund/refund?orderId=${orderId}&data=${JSON.stringify(cItem)}`
				})
			},
			/*退款详情*/
			async goRefundDetail(orderId,proId,productSkuId){
			 //    uni.navigateTo({
			 //        url: `/pages/refund/refund_detail?orderId=${orderId}&proId=${proId}&productSkuId=${productSkuId}`
				// })
			},
			/*查看物流*/
			showLog(orderId,count,pic){
			    uni.navigateTo({
			        url: `/pages/logistics/logistics?orderId=${orderId}&count=${count}&pic=${pic}`
			    })
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.isNo {
			padding-left: 40upx;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 26upx;
			color: $font-color-dark;

			.tag {
				font-size: 24upx;
				color: $uni-color-primary;
				margin-right: 10upx;
				background: #EEF4EE;
				/*border: 1px solid #ffb4c7;*/
				border-radius: 4upx;
				padding: 4upx 10upx;
				line-height: 1;
				margin-left: 30upx;
			}
		}

		.name {
			/*font-size: 34upx;*/
			margin-right: 28upx;
		}

		.mobile {
			font-size: 24upx;
		}

		.address {
			margin-top: 24upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;

			.name {
				font-size: 32upx;
				color: $font-color-dark;
				/*margin-left: 24upx;*/
				font-weight: bold;
			}

			.g-status {
				color: $uni-color-primary;
				font-size: 30upx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;
			border-bottom: 2upx solid #f2f2f2;
			padding-bottom: 20upx;
			flex-wrap: wrap;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
				.detailCenterBtns{
					display: flex;
					justify-content: flex-end;
				}
				.refund {
					display: flex;
					font-size: 22upx;
					color: #989898;
					/*<!--margin-top: -40rpx;-->*/
					justify-content: flex-end;
					
					button {
						border: none;
						outline: none;
						width: 100%;
						padding: 0;
						/*line-height: 40upx;*/
						height: 100%;
						background: #ffffff;
						display: flex;
						line-height: 40rpx;
						text-align: left;
						font-size: 22upx;
						color: #989898;
						/*<!--margin-top: -40rpx;-->*/
						justify-content: flex-end;
					}

					button::after {
						border: none;
					}

					text {
						width: 131upx;
						height: 50upx;
						border: 2upx solid #989898;
						line-height: 46upx;
						border-radius: 60upx;
						text-align: center;
						color: #282828;
					}
					&.wl{
						margin-right: 20upx;
					}
				}
			}

			.title {
				font-size: 28upx;
				color: $font-color-dark;
				padding-top: 10rpx;

				.t-name {
					width: 376upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.price {
					font-size: 26upx;
					color: #656565;
					float: right;
					margin-top: -38rpx;
				}
			}

			.spec {
				font-size: 24upx;
				color: $font-color-light;
			}

			.price-box {
				/*display: flex;*/
				align-items: center;
				font-size: 24upx;
				color: #989898;
				padding-top: 10upx;

				view {
					display: flex;
					align-items: center;
				}

				.price {
					margin-bottom: 4upx;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
					float: right;
					margin-top: -34rpx;
				}

				img {
					width: 23upx;
					height: 23upx;
					display: inline-block;
					margin-right: 20upx;
					border-radius: 50%;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-dark;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		&.actually {
			.m {
				font-size: 30upx;
				color: $uni-color-primary;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}

	/* 支付列表 */
	.pay-list {
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;

		.pay-item {
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;
			position: relative;
		}

		.icon-weixinzhifu {
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}

		.icon-alipay {
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}

		.icon-xuanzhong2 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}

		.tit {
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}

	/*底部*/
	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $uni-color-primary;
			margin-left: 8upx;
		}

		.price {
			font-size: 30upx;
			font-weight: 500;
			color: $uni-color-primary;
		}

		.submit {
			width: 159upx;
			height: 63upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32upx;
			border-radius: 32upx;
			background-color: $uni-color-primary;
			margin-right: 30rpx;

		}

		.total {
			color: #989898;
			font-size: 20upx;
		}
	}

	.footer.detail {
		justify-content: flex-end;

		.submit {
			font-size: 26upx;
		}

		.cancel {
			color: #989898;
			border: 2upx solid #989898;
			background: #ffffff;
		}

		.pay {
			color: $uni-color-primary;
			border: 2upx solid $uni-color-primary;
			background: #ffffff;
		}
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			min-height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			// height: 100upx;
			padding: 20rpx 0;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $uni-color-primary;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}

		.other {
			font-size: 32upx;
			text-align: center;
			padding: 30upx 0;
		}
	}

	.panic {
		font-size: $font-sm - 2upx;
		padding: 20rpx 0 30rpx 10rpx;
		width: 100%;

		.tag {
			color: $uni-color-primary;
			border: 2upx solid $uni-color-primary;
			padding: 5upx 10upx;
			border-radius: 50upx;
		}

		text {
			margin-right: 10upx;
		}
	}

	.disabled {
		.panic {
			color: #DADADA;

			.tag {
				color: #DADADA;
				border: 2upx solid #DADADA;
			}
		}

		.cart-item {
			.item-right {

				.title,
				.price,
				.attr,
				.unit {
					color: #DADADA;
				}

				.unit {
					text {
						color: #DADADA;
					}
				}
			}
		}

	}
</style>
